---
title: "Loader"
description: A lightweight and visually appealing loading indicator that enhances user experience by signaling ongoing background processes.
order: 6
published: true
---

## Basic
This is the basic loader component, used to indicate that a process or action is currently taking place.

<How toUse="statuses/loader/loader-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/loader
```
## Manual installation
```bash
npm i @heroicons/react
```

```
import { Loader } from "@/components/ui/loader"
```

```
<>
  <Loader variant="ring" />
  <Loader variant="spin" />
  <Loader variant="bars" />
</>
```

## Variants
There are four different variants of the loader. The default variant is the `ring-3`.
<How toUse="statuses/loader/loader-variant-demo" />

## Size
The loader defaults to a small size, but you can also select medium, large, or extra-large.
<How toUse="statuses/loader/loader-size-demo" />
